<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				margin: 100px;
				display: flex
			}
			.box a, .box span{
				border-radius: 6px;
				text-decoration: none;
				padding: 2px 14px;
				cursor: pointer;
				background-color: #666;
				margin: 5px;
				color: white;
				text-align: center;
				line-height: 30px;
				font-size: 14px;
				user-select: none;
			}
			.box .active{
				background-color: deeppink;
			}
			.box a:hover{
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
<script src="pagination/common/jquery.min.js"></script>
<script src="pagination/jquery.pagination.js"></script>
<script>
	
	$('.box').pagination({
		// 总页数
		pageCount : 22,
		current: 1,
		prevContent: '上一页',
		nextContent: '下一页',
		mode : 'fixed',
		// count : 8
		coping: true,
		homePage: '首页',
		endPage: '末页',
		isHide: true,
		jump: true,
		callback(obj){
			// 获取当前页，请求当前页数据
			console.log(obj.getCurrent());
			
			
			
			
			
			
		}
	});

</script>